<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品菜单</title>
    <link th:href="@{login/css/bootstrap1.css}" rel="stylesheet"/>
    <link th:href="@{/login/css/productTable.css}" rel="stylesheet"/>
    <script th:src="@{login/js/bootstrap1.js}"></script>
</head>
<body>
<div class="container">
    <div id="liveAlertPlaceholder" style="position:fixed;top:38%;right:46%;"></div>
    <div th:replace="basic/layout :: topNav"></div>
    <h3 class="card-title" style="margin-bottom: 10px">商品列表</h3>
    <table class="table table-hover">
        <thead class="table-light">
        <tr>
            <th>序号</th>
            <th>图片</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>库存数量</th>
            <th>分类</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="product:${products}">
            <td>
                <span class="num"></span>
            </td>
            <td>
                <img th:src="${product.imageUrl}" class="card-img-top productImg" th:alt="${product.name}">
            </td>
            <td th:text="${product.name}"></td>
            <td th:text="${product.price}"></td>
            <td th:text="${product.stock}"></td>
            <td>
                <span class="badge text-bg-secondary productSpan" th:text="${product.category}"></span>
            </td>
            <td>
                <span class="badge text-bg-success productSpan" th:if="${product.status} ==1">正常</span>
                <span class="badge text-bg-danger productSpan" th:if="${product.status} ==0">下架</span>
            </td>
            <td>
                <button type="button" class="btn btn-primary">修改</button>
                <button type="button" class="btn btn-danger" th:data-id="${product.id}" onclick="showModal(this.dataset.id)">
                    删除
                </button>
            </td>
        </tr>
        </tbody>
        <script>
            //序号的自动编号
            document.querySelectorAll('.num').forEach((span, index) => {
                span.textContent = index + 1; 
            });
        </script>
    </table>
    <!--模态框-->
    <div class="modal" tabindex="-1" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content" style="">
                <div class="modal-header">
                    <h3 class="modal-title" style="color: red;font-size: 20px">警告</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>请确认是否删除</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger" onclick="deleteProduct()">删除</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    //删除提示框法一
    const alterDom = document.getElementById("liveAlertPlaceholder")
    const alert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')

        alterDom.append(wrapper)
    }
    var deleteId;
    // 模态框：提示是否删除
    var myModal = new bootstrap.Modal(document.getElementById('deleteModal'), {
        keyboard: false        // 按 ESC 不能关闭
    });//模态框
    function showModal(productId){
        myModal.show()//打开模态框
        deleteId = productId;
    }
    function deleteProduct(){
        //     浏览器的直接访问方式：Get请求
        //     发起请求方式：1：浏览器直接访问 ；2：通过访问工具来发起请求
        //     script通过浏览器发起请求方式是：window.location.href
        // 1. 立即关掉模态框
        myModal.hide();

        //     把跳转动作推迟，先让用户看清提示，再离开当前页。
        // 2. 先弹出提示
        alert("删除成功", "success");
        // 3. 等提示框渲染完（给 1 s 足够，单位是毫秒）再跳转
        setTimeout(() => {
            window.location.href = "/deleteProduct?id=" + deleteId;
        }, 500);
    }

<!--   删除成功提示 ：法二-->
    // var deleteId;
    // // 模态框：提示是否删除
    // function showModal(productId){
    //     var myModal = new bootstrap.Modal(document.getElementById('deleteModal'), {
    //         keyboard: false        // 按 ESC 不能关闭
    //     });
    //     myModal.show()
    //     deleteId = productId;
    // }
    // function deleteProduct(){
    //     //     浏览器的直接访问方式：Get请求
    //     //     发起请求方式：1：浏览器直接访问 ；2：通过访问工具来发起请求
    //     //     script通过浏览器发起请求方式是：window.location.href
    //     // 1. 立即关掉模态框
    //     bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
    //
    //     // 2. 再弹成功提示并延迟跳转
    //     //     把跳转动作推迟，先让用户看清提示，再离开当前页。
    //     // 3. 先弹出提示
    //     alert("删除成功", "success");
    //     // 删除成功提示：法二：
    //     var messageDom=document.getElementById("liveAlertPlaceholder")
    //     messageDom.style.display="display"
    //     setTimeout(() => {
    //         messageDom.style.display="none"
    //         window.location.href = "/deleteProduct?id=" + deleteId;
    //     }, 1000);
    // }
</script>
</html>


<!--/*-->
thymeleaf注释方式：
可以用选择器btn-sm来控制大小，可变小，class="btn-sm"，btn-lg是大按钮样式
<button type="button" class="btn btn-primary btn-sm">修改</button>
创建一个点击事件，正常使用： onclick=deleteProduct('123') ,deleteProduct是绑定函数
<button type="button" class="btn btn-danger" th:data-id="${product.id}" onclick="deleteProduct(this.dataset.id)">
    删除
</button>
把 data- 后面的名字换成你需要的，横杠要变驼峰。
如：
data-name	th:data-name="${product.name}"	this.dataset.name
data-price	th:data-price="${product.price}"	this.dataset.price
data-stock-count	th:data-stock-count="${stock}"	this.dataset.stockCount
data-user-id	th:data-user-id="${user.id}"	this.dataset.userId
<!--*/-->
